<template>
  <view class="bg-white min-h-100vh p-4">
    <view v-if="dataList.length">
      <view
        v-for="i in dataList"
        :key="i.DutyID"
        class="rounded-4px text-first text-14px p-10px -mx-15px flex justify-between items-center"
        style="border-bottom: 1px #ccc solid"
      >
        <div>
          <view>民警：{{ i.OfficerName }}</view>
          <view class="my-10px" style="color: #f9ae3d">
            时间：{{ i.DutyDate }}
          </view>
        </div>
        <text
          v-show="!i.IsSure"
          style="color: #386ee8"
          @click="handleSrue(i.DutyID)"
        >
          确认
        </text>
      </view>
    </view>
    <u-empty v-else mode="data" />
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import dayjs from 'dayjs'
import { showModal, showToast } from '@/utils'
import { getOnGuardRecordsApi, sureOnGuarApi } from './service'
import { userStore } from '@/store'

@Component({ name: 'MessageList' })
export default class OnGuard extends Vue {
  dataList: any[] = []
  async handleSubmit() {
    try {
      showToast({ title: '提交成功' })
    } finally {
      uni.hideLoading()
    }
  }
  async handleSrue(DutyID: string) {
    const { confirm } = await showModal({
      content: '是否确认值班？'
    })
    if (confirm) {
      try {
        uni.showLoading({ title: 'loading...' })
        await sureOnGuarApi({ DutyID })
        showToast({ title: '成功确认' })
        await this.getData()
      } finally {
        uni.hideLoading()
      }
    }
  }
  async getData() {
    const { records } = await getOnGuardRecordsApi({
      OfficerID: (userStore.userInfo as any).OfficerID
    })
    this.dataList = records
  }
  async onLoad() {
    await this.getData()
  }
}
</script>

<style lang="scss" scoped></style>
